<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收货地址管理</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/address.css">
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/layer/layer.js"></script>
    <script src="assets/js/common.js"></script>
    
</head>

<body>

    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">青鸟商城</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <!-- <li class="active"><a href="#">热门推荐 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">国际品牌</a></li>
                    <li><a href="#">数码电器</a></li>
                    <li><a href="#">智能手机</a></li>
                    <li><a href="#">每日特价</a></li> -->
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="./ucenter.html">
                            <i class="glyphicon glyphicon-user"></i>
                            个人中心
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-off"></i>
                            安全退出</a>
                    </li>
                </ul>

            </div>
        </div>
    </nav>

    <div class="container user-info">
        <div class="row">
            <div class="col-xs-2">
                <ul class="nav nav-pills nav-stacked ">
                    <div class="avatar">
                        <img src="./uploads/avatar/01.jpg" class="img-circle user-avatar">
                    </div>
                    <hr>
                    <li role="presentation"><a href="./ucenter.html">会员中心</a></li>
                    <li role="presentation"><a href="./order-list.html">我的订单</a></li>
                    <li role="presentation"><a href="./update-info.html">信息设置</a></li>
                    <li role="presentation"><a href="./reset-pwd.html">重置密码</a></li>
                    <li role="presentation" class="active"><a href="./address.html">收货地址</a></li>


                </ul>
            </div>
            <div class="col-xs-10">
                <button class="btn btn-danger show-btn-add" data-toggle="modal" data-target="#myModal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    新增收货地址
                </button>
                <div class="addr-list">
                    <!-- <div class="panel panel-default">
                        <div class="panel-body">
                            <p>
                                收货人: 张三
                            </p>
                            <p>
                                联系电话: 18710950666
                            </p>
                            <p>
                                收货地址: 北京市中南海
                            </p>
                            <p>
                                详细地址: 中南海
                            </p>
                            <p class="clearfix">
                                <div class="btn-group  pull-right">
                                    <button class="btn btn-xs btn-info">编辑</button>
                                    <button class="btn btn-xs btn-danger">删除</button>
                                </div>
                            </p>
                        </div>
                    </div> -->

                </div>


            </div>
        </div>
    </div>


    <!-- 新增编辑模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增收货地址</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="consignee">收货人</label>
                        <input type="email" class="form-control" id="consignee" placeholder="收货人">
                    </div>
                    <div class="form-group">
                        <label for="tel">联系电话</label>
                        <input type="text" class="form-control" id="tel" placeholder="联系电话">
                    </div>
                    <div class="form-group city3">
                        <label for="province">收货地址</label>
                        <select id="province" name="province" class="form-control">
                            <option value="">--请选择省份--</option>
                        </select>
                        <select id="city" name="city" class="form-control">
                            <option value="">--请选择城市--</option>
                        </select>
                        <select id="county" name="county" class="form-control">
                            <option value="">--请选择区县--</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="address">详细地址</label>
                        <input type="text" class="form-control" id="address" placeholder="详细地址">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="btn-add">确认保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框 -->

    <div class="container-fluid footer">
        <div class="row">
            <div class="col-lg-12">
                Copyright 2019 by www.braccp.com 北京畅想唯优信息技术有限公司 All rights reserved.
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                联系电话：029-88212666 地址：西安市雁塔区电子一路 石油大学北门工会楼二层
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                备案号：陕ICP备19013769号-1
            </div>
        </div>
    </div>
</body>
<script src="./assets/js/city-data.js"></script>
<script src="./assets/js/addr.js"></script>
<script src="./assets/js/ucenter.js"></script>
<script>
    // 校验登录凭证
    auth();
    var addrId = 0;
    // 新增收货地址
    $(".show-btn-add").on('click', function () {
        // 重置模态框中的表单数据
        $("#consignee").val('');
        $("#tel").val('');
        $("#address").val('');
        // 初始化省市区三级联动
        cityInit();
    });
    // 保存收货地址
    $("#btn-add").on('click', function () {
        // console.log(111);
        // 获取表单数据
        var consignee = $("#consignee").val().trim();
        var tel = $("#tel").val().trim();
        var province = $("#province option:selected").attr('provincename').trim();
        var city = $("#city option:selected").attr('cityname').trim();
        var county = $("#county option:selected").attr('countyname').trim();
        var address = $("#address").val().trim();
        // console.log(province,city,county);
        // return;
        if (consignee === '') {
            return layer.msg('请输入收货人');
        }
        if (tel === '' || tel.length != 11) {
            return layer.msg('请输入11位手机号码');
        }
        if (province === '') {
            return layer.msg('请选择省份');
        }
        if (city === '') {
            return layer.msg('请选择城市');
        }
        if (county === '') {
            return layer.msg('请选择区县');
        }
        if (address === '') {
            return layer.msg('请输入详细地址');
        }
        // 新增
        if (addrId === 0) {
            // 发送请求
            $.ajax({
                url: '/apis/index.php?c=address&a=add',
                type: 'POST',
                data: { consignee, tel, province, city, county, address },
                dataType: 'json',
                headers: {
                    Token: localStorage.getItem('token')
                }
            }).then(res => {
                // console.log(res);
                if (res.errcode === 0) {
                    // 隐藏模态框
                    layer.msg('新增收货地址成功', function () {
                        $("#myModal").modal('hide');
                        location.reload();
                    });
                } else {
                    layer.msg(res.msg);
                }
            })
        } else {  // 更新
            // 发送请求
            $.ajax({
                url: `/apis/index.php?c=address&a=update&id=${addrId}`,
                type: 'POST',
                data: { consignee, tel, province, city, county, address },
                dataType: 'json',
                headers: {
                    Token: localStorage.getItem('token')
                }
            }).then(res => {
                // console.log(res);
                if (res.errcode === 0) {
                    // 隐藏模态框
                    layer.msg('更新收货地址成功', function () {
                        $("#myModal").modal('hide');
                        location.reload();
                    });

                } else {
                    layer.msg(res.msg);
                }
            })
        }
    });

    // 获取收货地址
    $.ajax({
        url: '/apis/index.php?c=address&a=list',
        dataType: 'json',
        headers: {
            Token: localStorage.getItem('token')
        }
    }).then(res => {
        // console.log(res);
        if (res.errcode === 0) {
            var html = '';
            res.data.forEach(item => {
                html += `
                <div class="panel panel-default">
                        <div class="panel-body">
                            <p>
                                收货人: ${item.consignee}
                            </p>
                            <p>
                                联系电话: ${item.tel}
                            </p>
                            <p>
                                收货地址: ${item.province}-${item.city}-${item.county}
                            </p>
                            <p>
                                详细地址: ${item.address}
                            </p>
                            <p class="clearfix">
                                <div class="btn-group  pull-right">
                                    <button class="btn btn-xs btn-info btn-edit" addr-id="${item.id}">编辑</button>
                                    <button class="btn btn-xs btn-danger btn-del"  addr-id="${item.id}">删除</button>
                                </div>
                            </p>
                        </div>
                    </div>
                `;
                // 渲染列表
                $(".addr-list").html(html);
            });
        }
    });

    // 编辑收货地址: 事件委托
    $(".addr-list").on('click', '.btn-edit', function () {
        // console.log($(this).attr('addr-id'));
        addrId = $(this).attr('addr-id');
        // 获取地址信息
        $.ajax({
            url: '/apis/index.php?c=address&a=get',
            type: 'GET',
            data: { id: addrId },
            dataType: 'json',
            headers: {
                Token: localStorage.getItem('token')
            }
        }).then(res => {
            // console.log(res);
            // 渲染默认收货信息
            const info = res.data;
            $("#consignee").val(info.consignee);
            $("#tel").val(info.tel);
            $("#email").val(info.email);
            $("#address").val(info.address);
            // 自动选择省市区
            // console.log(info.province,info.city,info.county);
            cityInit({
                province: info.province,
                city: info.city,
                county: info.county
            });
            // 更新模态框标题
            $("#myModalLabel").html('编辑收货地址');
            // 显示模态框
            $("#myModal").modal('show');

        });
    });

    // 删除收货地址: 事件委托
    $(".addr-list").on('click', '.btn-del', function () {
        // 收货地址的id
        var id=$(this).attr('addr-id');
        if(!confirm('确认删除吗?')){
            return false;
        }
        // 发送请求
        $.ajax({
            url:'/apis/index.php?c=address&a=del',
            data:{id},
            dataType:'json',
            headers:{
                Token:localStorage.getItem('token')
            }
        }).then(res=>{
            if(res.errcode===0){
                layer.msg('删除成功');
                // 移除页码上的标签
                $(this).parents('.panel').remove();
            }else{
                layer.msg('删除失败, 请重试');
            }
        });
    })
</script>

</html>